// 过滤路由
import React, { Component,Suspense } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom'
import loading from '../assets/loading.gif'

class RouterView extends Component {
    render() {
        var { routes } = this.props
        var nomalroutes = routes.filter((item) => {
            return item.path && item.component
        })
        var redirectroutes = routes.filter((item) => {
            return item.redirect
        })
        var notfoundroutes = routes.filter((item) => {
            return item.component && !item.path
        })
        return (
                <Suspense fallback={<img className='com_loading' src={loading} />}>
                <Switch>
                    {nomalroutes.map((item, index) => {
                        return (
                            <Route key={index} exact={item.exact||false} path={item.path} render={(props)=>{
                                if(item.children && item.children.length>0){
                                    return <item.component {...props} routes={item.children} ></item.component>
                                }else{
                                    return <item.component {...props} ></item.component>
                                }
                            }}></Route>
                        )
                    })}
                    {redirectroutes.map((item, index) => {
                        return (
                            <Redirect key={index} exact from={item.from} to={item.to}></Redirect>
                        )
                    })}
                    {notfoundroutes.map((item, index) => {
                        return (
                            <Route key={index} component={item.component}></Route>
                        )
                    })}
                </Switch>
            </Suspense>
        );
    }
}

export default RouterView;